<template>
  <div class="user">
    <PageSearch
      @queryBtnClick="(queryBtnClick as any)"
      @resetBtnClick="(resetBtnClick as any)"
      :SearchFromConfig="SearchFromConfig"
    ></PageSearch>
    <pageContent
      ref="pageContentRef"
      :ContentTableConfig="ContentTableConfig"
      @editDataClick="(editDataClick as any)"
      @newCreateClick="(newCreateClick as any)"
      pageName="users"
    ></pageContent>
    <PageModal
      ref="pageModalRef"
      pageName="users"
      :defaultFromData="ModelEditData"
      :modalConfig="modalConfigRef"
    ></PageModal>
  </div>
</template>

<script lang="ts" setup>
import { reactive, computed } from 'vue';

import PageSearch from '@/components/pageSearch';
import pageContent from '@/components/pageContent';
import PageModal from '@/components/page-modal';

import { useStore } from '@/store';

import { usePageSearch } from '@/hooks/usePageSearch';
import { usePageModal } from '@/hooks/usePageModal';

import { SearchFromConfig } from './config/search.config';
import { ContentTableConfig } from './config/contentTable.config';
import { modalConfig } from './config/modal.config';

// 这个是一定需要包装一层的，让vue内存进行响应收集
const modalConfigs = reactive(modalConfig);
const store = useStore();

const roleItem = modalConfigs.formItems.find((item) => item.filed === 'roleId');
const passwordItem = modalConfigs.formItems.find(
  (item) => item.filed === 'password'
);

/** 这里很重要的一个概念就出来了，里面的响应式数据只要有一个改变了，我就会重新执行。。 */
const modalConfigRef = computed(() => {
  const departmentItem = modalConfigs.formItems.find(
    (item) => item.filed === 'departmentId'
  );
  departmentItem!.options = store.state.allDepartment.map((item) => {
    return { value: item.id, title: item.name };
  });
  roleItem!.options = store.state.allRole.map((item) => {
    return { value: item.id, title: item.name };
  });
  return modalConfigs;
});

const editCallback = () => {
  passwordItem!.isHidden = true;
};

const addCallback = () => {
  // 引用类型的威力！！
  passwordItem!.isHidden = false;
};

const [queryBtnClick, resetBtnClick, pageContentRef] = usePageSearch();
const [pageModalRef, newCreateClick, editDataClick, ModelEditData] =
  usePageModal(editCallback, addCallback);
</script>

<style lang="less" scoped></style>
